<template>
  <div>
    <scroller
      class="sroll"
      :on-refresh="refresh"
      :on-infinite="infinite"
      refresh-layer-color="#FBD391"
      loading-layer-color="#FBD391"
      refreshText="refresh"
      noDataText=""
      ref="myScroller"
    >
      <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </ul>
    </scroller>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 下拉刷新
    refresh() {
      //要刷新的数据请求
      console.log('11111111');
      //关闭loading
      this.timeout = setTimeout(() => {
        this.$refs.myScroller.finishPullToRefresh();
      }, 2000);
    },
    infinite() {
      console.log("上拉加载");
      this.$refs.myScroller.finishInfinite(true);
    },
  },
};
</script>
<style lang="less" scoped>
//设置scroller距离顶部的距离，移动端开发顶部会有个head组件（我移动端适配采用vw，所以直接输入px单位）

</style>